<template>
	<view class="container">
		<view class="card mb-20">
			<view class="flex flex-direction-column align-center p-20">
				<image src="/static/avatar.jpg" mode="aspectFill" style="width: 120rpx; height: 120rpx; border-radius: 50%;"></image>
				<text class="mt-20" style="font-size: 32rpx; font-weight: bold;">用户名</text>
			</view>
		</view>
		
		<view class="card mb-20">
			<view class="setting-item flex justify-between align-center p-20 mb-20">
				<view class="flex align-center">
					<text>用户名</text>
				</view>
				<text class="text-gray">user123</text>
			</view>
			<view class="setting-item flex justify-between align-center p-20 mb-20">
				<view class="flex align-center">
					<text>手机号</text>
				</view>
				<text class="text-gray">138****8888</text>
			</view>
			<view class="setting-item flex justify-between align-center p-20">
				<view class="flex align-center">
					<text>昵称</text>
				</view>
				<text class="text-gray">旅游爱好者</text>
			</view>
		</view>
		
		<view class="card mb-20">
			<view class="setting-item flex justify-between align-center p-20">
				<view class="flex align-center">
					<text>个性签名</text>
				</view>
				<text class="text-gray">世界很大，我想去看看</text>
			</view>
		</view>
		
		<view class="button">保存修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

<style>
	.setting-item {
		border-bottom: 1rpx solid #eee;
	}
	
	.setting-item:last-child {
		border-bottom: none;
	}
</style>